<template>
  <div class="detail">
    <div class="top">
      <ul>
        <li v-for="(item, index) in list" :key="item" :style="{ backgroundColor: item.color }">
          <div class="shadow" v-html="item.icon"></div>
          <div class="info">
            <p>今日收入</p>
            <span :id="`count${index}`">{{ item.count }}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="echart">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="user">
            <h2>每周用户</h2>
            <PieUserEchart></PieUserEchart>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="history">
            <h2>交易历史记录</h2>
            <LineHistoryEchart></LineHistoryEchart>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="table">
      <TableView :tableConfig="tableConfig">
        <template #state="{ state }">
          <el-tag
            class="ml-2"
            :type="state === 0 ? 'warning' : state === 1 ? 'danger' : 'success'"
            >{{ state === 0 ? '待定' : state === 1 ? '进行中' : '已完成' }}</el-tag
          >
        </template>
        <template #progress="{ row }">
          <div class="progress">
            <div
              class="value"
              :style="{
                width: row.progress,
                backgroundColor:
                  row.state === 0 ? '#faa64b' : row.state === 1 ? '#f96868' : '#15c377'
              }"
            ></div>
          </div>
        </template>
      </TableView>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CountUp } from 'countup.js'
import { onMounted } from 'vue'
import PieUserEchart from '@/components/echart/PieUserEchart.vue'
import LineHistoryEchart from '@/components/echart/LineHistory.vue'
import TableView from './components/TableView.vue'
import tableConfig from './TableView.config'
const list: any = [
  {
    text: '今日收入',
    count: 102125,
    color: '#33cabb',
    icon: `   <svg
              t="1696858310120"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2991"
              width="21"
              height="28"
            >
              <path
                d="M469.333333 682.666667v-85.333334H256v-85.333333h213.333333v-34.133333L264.533333 273.066667 328.533333 213.333333 512 396.8 695.466667 213.333333l59.733333 59.733334-200.533333 204.8v34.133333h213.333333v85.333333h-213.333333v85.333334h213.333333v85.333333h-213.333333v85.333333h-85.333334v-85.333333H256v-85.333333h213.333333z"
                fill="#ffffff"
                p-id="2992"
              ></path>
            </svg>`
  },
  {
    text: '用户总数',
    count: 920000,
    color: '#f96868',
    icon: `<svg t="1696859566500" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4025" width="21" height="28"><path d="M277.568 842.709333A403.477333 403.477333 0 0 0 512 917.333333c87.36 0 168.256-27.626667 234.432-74.624C740.885333 718.037333 638.058667 618.666667 512 618.666667c-126.037333 0-228.864 99.370667-234.432 224.042666z m-39.637333-32.064c15.36-99.413333 83.498667-181.376 174.890666-216.384A213.312 213.312 0 0 1 298.666667 405.333333c0-117.824 95.509333-213.333333 213.333333-213.333333s213.333333 95.509333 213.333333 213.333333a213.312 213.312 0 0 1-114.154666 188.928c91.392 34.986667 159.530667 116.970667 174.890666 216.384A404.266667 404.266667 0 0 0 917.333333 512c0-223.850667-181.482667-405.333333-405.333333-405.333333S106.666667 288.149333 106.666667 512a404.266667 404.266667 0 0 0 131.264 298.645333zM512 960C264.576 960 64 759.424 64 512S264.576 64 512 64s448 200.576 448 448-200.576 448-448 448z m0-384a170.666667 170.666667 0 1 0 0-341.333333 170.666667 170.666667 0 0 0 0 341.333333z" fill="#ffffff" p-id="4026"></path></svg>`
  },
  {
    text: '下载总量',
    count: 34005000,
    color: '#15c377',
    icon: `<svg t="1696859585778" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5087" width="21" height="28"><path d="M808.192 246.528a320.16 320.16 0 0 0-592.352 0A238.592 238.592 0 0 0 32 479.936c0 132.352 107.648 240 240 240h91.488a32 32 0 1 0 0-64H272a176.192 176.192 0 0 1-176-176 175.04 175.04 0 0 1 148.48-173.888l19.04-2.976 6.24-18.24C305.248 181.408 402.592 111.936 512 111.936a256 256 0 0 1 242.208 172.896l6.272 18.24 19.04 2.976A175.04 175.04 0 0 1 928 479.936c0 97.024-78.976 176-176 176h-97.28a32 32 0 1 0 0 64h97.28c132.352 0 240-107.648 240-240a238.592 238.592 0 0 0-183.808-233.408z" p-id="5088" fill="#ffffff"></path><path d="M649.792 789.888L544 876.48V447.936a32 32 0 0 0-64 0V876.48l-106.752-87.424a31.968 31.968 0 1 0-40.544 49.504l159.04 130.24a32 32 0 0 0 40.576 0l158.048-129.44a32 32 0 1 0-40.576-49.472z" p-id="5089" fill="#ffffff"></path></svg>`
  },
  {
    text: '新增留言',
    count: 153,
    color: '#926dde',
    type: 'message',
    icon: `<svg t="1696859607129" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6189" width="21" height="28"><path d="M512 64c259.2 0 469.333333 200.576 469.333333 448s-210.133333 448-469.333333 448a484.48 484.48 0 0 1-232.725333-58.88l-116.394667 50.645333a42.666667 42.666667 0 0 1-58.517333-49.002666l29.76-125.013334C76.629333 703.402667 42.666667 611.477333 42.666667 512 42.666667 264.576 252.8 64 512 64z m0 64C287.488 128 106.666667 300.586667 106.666667 512c0 79.573333 25.557333 155.434667 72.554666 219.285333l5.525334 7.317334 18.709333 24.192-26.965333 113.237333 105.984-46.08 27.477333 15.018667C370.858667 878.229333 439.978667 896 512 896c224.512 0 405.333333-172.586667 405.333333-384S736.512 128 512 128z m-157.696 341.333333a42.666667 42.666667 0 1 1 0 85.333334 42.666667 42.666667 0 0 1 0-85.333334z m159.018667 0a42.666667 42.666667 0 1 1 0 85.333334 42.666667 42.666667 0 0 1 0-85.333334z m158.997333 0a42.666667 42.666667 0 1 1 0 85.333334 42.666667 42.666667 0 0 1 0-85.333334z" fill="#ffffff" p-id="6190"></path></svg>`
  }
]

onMounted(() => {
  list.forEach((item: any, index: number) => {
    new CountUp(`count${index}`, item.count, {
      suffix: item.type ? '条' : ''
    }).start()
  })
})
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  margin-bottom: 15px;
  ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  li {
    border-radius: 3px;
    width: 24%;
    padding: 20px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    p {
      margin-bottom: 8px;
    }
    span {
      font-size: 20px;
    }
    .shadow {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.175);
      display: flex;
      justify-content: center;
      align-items: center;
      svg {
        width: 21px !important;
        height: 28px !important;
      }
    }
  }
}
.echart {
  margin-bottom: 15px;
  .user,
  .history {
    background-color: #fff;
  }
  h2 {
    font-size: 20px;
    padding: 15px;
    border-bottom: 1px solid #ccc;
  }
}
.progress {
  width: 100%;
  height: 8px;
  background-color: #f5f6f7;
  position: relative;
  border-radius: 5px;
  .value {
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;

    height: 100%;
  }
}
</style>
